<nz-card class="card-box">
  <div nz-row class="row">
    <div nz-col nzSpan="2" class="label-box">
      <label>分组ID:</label>
    </div>
    <div nz-col nzSpan="5">
      <input nz-input placeholder="分组ID" class="input-box" />
    </div>
    <div nz-col nzSpan="2" class="label-box">
      <label>分组名称:</label>
    </div>
    <div nz-col nzSpan="5">
      <input nz-input placeholder="分组名称" class="input-box" />
    </div>
    <div nz-col nzSpan="4" class="btn-box">
      <button nz-button nzType="primary" nzShape="round" nzSize="large">
        <i nz-icon nzType="search"></i>
        搜索
      </button>
    </div>
  </div>
  <div nz-row class="row">
    <div nz-col nzSpan="24">
      <button nz-button nzType="primary" nzSize="large" (click)="handleAdd()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        新增
      </button>
    </div>
  </div>
  <div nz-row class="row">
    <div nz-col nzSpan="24">
      <nz-table #borderedTable nzBordered [nzData]="dataSet">
        <thead>
          <tr>
            <th>#</th>
            <th>分组ID</th>
            <th>分组名称</th>
            <th>网关实例IP</th>
            <th nzWidth="40">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of borderedTable.data">
            <td>{{ data.index }}</td>
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.getwayIP }}</td>
            <td class="del">
              <button nz-button nzType="primary" nzGhost>查看</button>
              <button nz-button nzType="primary" nzGhost>编辑</button>
              <button nz-button nzType="primary" nzGhost>删除</button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>
